<template>
  <div class="exercise-container">
    <h1>运动建议</h1>

    <el-card class="exercise-card">
      <template #header>
        <div class="card-header">
          <span>今日运动计划</span>
        </div>
      </template>

      <div class="exercise-content">
        <div class="exercise-item">
          <h3>有氧运动</h3>
          <p>建议时长: 30分钟</p>
          <p>推荐项目: 快走、游泳、骑自行车</p>
          <el-progress :percentage="40" />
        </div>

        <div class="exercise-item">
          <h3>力量训练</h3>
          <p>建议时长: 15分钟</p>
          <p>推荐项目: 哑铃、弹力带训练</p>
          <el-progress :percentage="20" status="exception" />
        </div>

        <el-button type="primary" @click="recordExercise">记录运动</el-button>
      </div>
    </el-card>

    <div class="history-section">
      <h2>历史运动记录</h2>
      <el-table :data="exerciseHistory" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="type" label="运动类型" width="180" />
        <el-table-column prop="duration" label="时长(分钟)" />
        <el-table-column prop="intensity" label="强度" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const exerciseHistory = ref([
  {
    date: '2023-11-01',
    type: '快走',
    duration: 30,
    intensity: '中等'
  },
  {
    date: '2023-10-30',
    type: '游泳',
    duration: 25,
    intensity: '中等'
  },
  {
    date: '2023-10-28',
    type: '骑自行车',
    duration: 40,
    intensity: '高强度'
  }
]);

const recordExercise = () => {
  // 记录运动逻辑
  console.log('记录运动');
};
</script>

<style scoped>
.exercise-container {
  padding: 20px;
}

.exercise-card {
  margin-bottom: 30px;
}

.card-header {
  font-weight: bold;
  font-size: 18px;
}

.exercise-content {
  padding: 15px;
}

.exercise-item {
  margin-bottom: 20px;
}

.history-section {
  margin-top: 30px;
}
</style>